/*
 * @Description:
 * @Author: ldx
 * @Date: 2022-05-11 18:55:38
 * @LastEditors: ldx
 * @LastEditTime: 2022-05-12 10:20:57
 */
import { Upload } from 'antd'
import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface'
// import ImgCrop from 'antd-img-crop'
import { useEffect, useState } from 'react'
// value, onChange 是Form.Item 给的。
type Value = UploadFile & { id?: string }
interface PriceInputProps {
  value?: Value[]
  onChange?: (value: Value[]) => void
}

const MyUpload: React.FC<PriceInputProps> = ({ value, onChange }) => {
  // 这个value就是那个被 Form.Item 双向绑定的 img 属性
  // 每次 value 变化，当前这个组件都会重新运行。
  // 解决编辑时，填充表单的问题，使用 fileList对Upload进行受控
  const [fileList, setFileList] = useState<Value[]>([])
  const baseUrl =
    'http://10.168.1.100:31133/dev-saas-platform-server/pub/file/get/'
  useEffect(() => {
    console.log('---------vlues:', fileList, value)
    if (value) {
      setFileList(
        value.map((item) => {
          return {
            thumbUrl: baseUrl + item.id,
            name: item.name,
            uid: item.uid
          }
        })
      )
    }
  }, [value])

  useEffect(() => {
    // 解决Form.Item的双向绑定问题
    if (!value) return
    if (fileList.length > 0) {
      console.log('file:', fileList)
      // const file = fileList[0]
      fileList.map((item) => {
        // 当图片真正上传成功后，把图片的可访问地址返回给父组件
        if (item.response && item.response.file_id) {
          // 把fileList中img回传给父组件进行双向绑定
          onChange &&
            onChange([
              ...value,
              {
                id: item.response.file_id,
                name: item.response.file_name,
                uid: item.uid
              }
            ])
        }
      })
    }
  }, [fileList])

  // 问题：当Upload被fileList受控后，onChange只能打印一次。
  // 解决方案参考链接：https://github.com/ant-design/ant-design/issues/2423
  const imgChange = (data: UploadChangeParam) => {
    console.log('newFile', data)
    setFileList([...data.fileList])
  }

  // 当点击图片删除时，向父组件回传一个空字符串
  const imgRemove = (file: UploadFile) => {
    console.log('onremove', file)
    const newValue = value?.filter((item) => {
      return item.uid != file.uid
    })
    onChange && onChange(newValue || [])
  }

  return (
    <Upload
      name="file" //后端接受图片数据的key名
      action="/api/pub/file/upload"
      listType="picture-card"
      onChange={imgChange}
      onRemove={imgRemove}
      maxCount={2}
      fileList={fileList}
      customRequest={(file) => console.log('file:', file)}
    >
      {fileList.length > 1 ? '' : '+ 上传'}
    </Upload>
  )
}
export default MyUpload
